<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>放大镜</title>
<script src="./lib/jquery-1.12.3.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
}
.mid {
	width:350px;
	height:350px;
	border:1px solid #CCCCCC;
	position:relative;
}
.mid img {
	width:350px;
	height:350px;
}
.mid span {
	width:175px;
	height:175px;
	position:absolute;
	border:1px solid #AFAFAF;
	top:0;
	left:0;
	display:none;
}
.mid:hover span {
	display:block;
	background-image:url(img/bg.png);
}
.wai {
	float:left;
}
.small {
	padding:30px 0 0 50px;
}
.small img {
	width:56px;
	height:56px;
	border:1px solid #ccc;
}
.small .active {
	border:1px solid red;
}
.small img:hover {
	border:1px solid red;
}
.big {
	width:400px;
	height:400px;
	position:relative;
	float:left;
	overflow:hidden;
	border:1px solid #969696;
	display:none;
}
.big img {
	position:absolute;
	display:block;
}

</style>

</head>
<body>
    <div class="wai">
        <div class="small">
            <img class="active" src="images/st.jpg">
            <img src="http://www.jq22.com/img/cs/500x500-2.png">
            <img src="http://www.jq22.com/img/cs/500x500-3.png">
        </div>
        <div class="mid">
            <img src="images/st.jpg">
            <span></span>
        </div>
    
    </div>
    
    <div class="big">
        <img src="images/Lt.jpg">
    </div>
</body>
</html>
<script>
var imid = $(".mid"),
    ibig = $(".big"),
    ismall = $(".small img"),
    tbig = $(".big img");

var midArr = ["images/st.jpg", "./images/gw2.jpg", "http://www.jq22.com/img/cs/500x500-3.png"];
var bigArr = ["images/Lt.jpg", "./images/gw2L.jpg", "http://www.jq22.com/img/cs/500x500-3.png"];
ismall.each(function(i) {
    $(this).click(function() {
        $(".mid img").attr("src", midArr[i])
        tbig.attr("src", bigArr[i])
        ismall.removeClass("active")
        $(this).addClass("active")
    })
    imid.mousemove(function(a) {
        var evt = a || window.event
        ibig.css('display', 'block')
        var y = evt.clientY - ($(".mid").offset().top - $(document).scrollTop()) - 87;
        var x = evt.clientX - ($(".mid").offset().left - $(document).scrollLeft()) - 87;

        if (x <= 0) {
            x = 0;
        }
        if (y <= 0) {
            y = 0;
        }
        if (x >= 175) {
            x = 175
        }
        if (y >= 175) {
            y = 175
        }
        $("span").css({
            'left': x,
            'top': y
        })
        var yy = y / 350 * 500
        var xx = x / 350 * 500
        $('p').text(xx + "---" + yy);
        tbig.css({
            'left': -xx,
            'top': -yy
        })
    })
    imid.mouseout(function() {
        ibig.css('display', 'none')
    })

})
</script>